import React, { useRef } from 'react';
import {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { message } from 'antd';

type FormProps = {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (info:string|undefined) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, onCancel, onSubmit } = props;
  if (!visible) {
    return <></>;
  }

  // const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const handleFormSubmit = async () => {
    let handlerInfo = formRef.current?.getFieldValue("handlerInfo");
    // console.log(groupIds);
    if(!handlerInfo){
      message.error("请填写正确数据");
      return;
    }
    onSubmit(handlerInfo);
  };

  return (
    <ModalForm<API.Ticket>
      width={800}
      visible={visible}
      title="问题处理信息"
      onFinish={handleFormSubmit}
      formRef={formRef}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: false,
        maskClosable: false,
      }}
    >

      <ProFormGroup>
        <ProFormTextArea
          name="handlerInfo"
          label="处理信息"
          width={900}
          fieldProps={{ rows: 10 }}
        />
      </ProFormGroup>


    </ModalForm>
  );
};

export default Form;
